import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_jd/pages/tabbar/my/controller.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

// 工具区域
class MyToolsWrap extends GetWidget<MyController> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 10.w, right: 10.w, top: 12.h),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10.r),
      ),
      child: Column(
        children: [
          Container(
            height: 140.h,
            padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 10.w),
            child: PageView(
              onPageChanged: (int index) {
                controller.currentPageIndex = index % (2);
              },
              children: <Widget>[
                Container(
                  child: Column(
                    children: [
                      _buildScrollRow(controller.toolsList.sublist(0, 5)),
                      _buildScrollRow(controller.toolsList.sublist(5, 10),
                          top: 10),
                    ],
                  ),
                ),
                Container(
                  child: Column(
                    children: [
                      _buildScrollRow(controller.toolsList.sublist(0, 5)),
                      _buildScrollRow(controller.toolsList.sublist(5, 10),
                          top: 10),
                    ],
                  ),
                )
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.only(bottom: 10.r),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(2, (i) {
                return Container(
                  margin: EdgeInsets.symmetric(horizontal: 3.w),
                  width: 6.r,
                  height: 6.r,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: controller.currentPageIndex == i
                        ? Color(0xFFFd3D29)
                        : Color(0xFFE3E3E3),
                  ),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildScrollRow(List iconList, {double top = 0}) {
    return Container(
      margin: EdgeInsets.only(top: top),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: List.generate(
          5,
          (index) {
            var src = iconList[index]['icon'];
            var text = iconList[index]['title'];

            return Container(
              width: 55.w,
              height: 55.h,
              child: Column(
                children: [
                  Container(
                    width: 30.sp,
                    child: Image.asset(src),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 4.h),
                    child: Text(
                      text,
                      style: TextStyle(
                        color: Color(0xFF555555),
                        fontSize: 12.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}
